<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <script type="text/javascript">
        const siteUrl = "./",
            musicMp3 = "media/bgm.mp3"
    </script>
    <link rel="stylesheet" href="css/music.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/ani.css?&t=201704041722" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/animate.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/common.css?&t=201704041722" rel="stylesheet" type="text/css">
</head>
<body>

    <div class="pop-bg" id="pop" style="display: block">
        <div class="share-box" id="share"><img src="img/share_box.png" width="100%" alt="" /></div>
        
        <div class="pop-box" id="rule">
            <div class="pop-title">奖品规则信息</div>
            <div class="pop-content">
                <p>1、即日参加【来run，燃爆你的夏日】，单局冲刺得分超过100分，即为通关，可凭成绩得分页面，联系现场工作人员兑换爆锐好礼；</p>
                <p>2、活动期间每人默认可玩3局，邀请好友可增加参与机会，每人有一次中奖兑奖机会。</p>
                <p>3、通关后兑换礼品后，不可再重复参与游戏。</p>
                <p><br /></p>
                <p style="position: absolute; bottom: .2rem;">*更多活动详情，请询问现场工作人员。活动的最终解释权归上海申美饮料食品有限公司所有</p>
            </div>
            <img class="pop-close" src="img/close_btn.png" alt="">
        </div>

        <div class="pop-box game" id="tips" style="display: block">
            <div class="pop-title">提示</div>
            <div class="pop-content">
                <p><br /></p>
                <p><br /></p>
                <p><br /></p>
                <p>此为线下活动，请至活动现场参与互动，更多福利互动请关注【可口可乐乐在上海】微信公众号。</p>
            </div>
            <img class="pop-close" src="img/close_btn.png" alt="">
        </div>
    </div>

    <!--游戏活动结束后、用户的中奖信息-->
    <div class="pop-bg" id="prize">
        <div class="pop-box" id="prizeInfo">
            <div class="pop-title">中奖信息</div>
            <div class="pop-content">
                <div class="text-center">
                	<p class="title">恭喜您!</p>
                	<p>您的游戏排名为第10名<br/>获取XXX一箱</p>
                	<p>此处插入奖品图</p>
                	<img class="btn-into-prize" src="img/index_btn_prize.png" id="write-address" alt="">
                </div>
            </div>
            <img class="pop-close" src="img/close_btn.png" alt="">
        </div>

        <div class="pop-box" id="address">
            <div class="pop-title">填写领奖信息</div>
            <div class="pop-content">
                <div class="text-center">
                	<img class="address-info" src="img/address-note.png" alt="">
                	<div class="input-text">
                		<input type="text" placeholder="填写姓名" name="">
                	</div>
                	<div class="input-text">
                		<input type="text" placeholder="填写手机号码" name="">
                	</div>
                	<div class="input-text">
                		<input type="text" placeholder="填写验证码" name="">
                		<button>获取验证码</button>
                	</div>
                	<div class="input-select">
                		<div class="select-box">
                			<input type="text" placeholder="所在省份" name="">
	                		<select>
	                			<option>所在省份</option>
	                		</select>
	                	</div>
	                	<div class="select-box">
	                		<input type="text" placeholder="所在城/区" name="">
	                		<select>
	                			<option>所在城/区</option>
	                		</select>
                		</div>
                	</div>
                	<div class="input-text">
                		<input type="text" placeholder="填写详细收货地址" name="">
                	</div>
                	<img class="btn-into-prize" src="img/submit.png" id="write-address" alt="">
                </div>
            </div>
            <img class="pop-close" src="img/close_btn.png" alt="">
        </div>
    </div>

    <div class="pop-bg game" id="popGame">
        <div class="pop-box game" id="gameInfo">
            <div class="pop-title">游戏玩法</div>
            <div class="pop-content game-info">
                <p>点击按钮，控制人物奔跑</p>
                <p>100m即可通关</p>
                <p>利用以下道具，赛出你的最佳成绩！</p>
                <p><img src="img/game_item_blue.png" alt="" />燃力瓶：+10分、保护盾</p>
                <p><br /></p>
                <p><img src="img/game_item_black.png" alt="" />耐力瓶：+30分</p>
                <p>障碍物：game over</p>
            </div>
            <div class="pop-btn-box flex">
                <img id="back" src="img/back_btn.png" alt="" />
                <img id="start" src="img/start_btn.png" alt="" />
            </div>
        </div>

        <div class="pop-box game" id="success">
            <div class="pop-title">闯关成功</div>
            <div class="pop-content over">
                <div class="score-box"><span>470</span>m</div>
                <p>恭喜你跑了<span id="scoreShow">0</span>m，</p>
                <p>请勿关闭此页面，可凭此页面联系现场人员兑换爆锐好礼</p>
                <p>（活动期间每人仅有一次兑奖机会）</p>
            </div>
            <div class="pop-btn-box flex">
                <img class="share" src="img/index_btn_share_w.png" alt="" />
                <img class="gift over" src="img/index_btn_gift_w.png" alt="" />
            </div>
            <!--<img class="play-again" src="img/play_again_btn.png" alt="">-->
        </div>

        <div class="pop-box game" id="failed">
            <div class="pop-title">闯关失败</div>
            <div class="pop-content over">
                <div class="score-box"><span>470</span>m</div>
                <p>不要灰心</p>
                <p>100m即可通关</p>
                <p>挑战自己，再玩一次吧~</p>
            </div>
            <div class="pop-btn-box flex">
                <img class="share" src="img/index_btn_share_w.png" alt="" />
                <img class="gift over" src="img/index_btn_gift_w.png" alt="" />
            </div>
            <img class="play-again" src="img/play_again_btn.png" alt="">
        </div>
    </div>

    <div class="page index">
        <img class="title" src="img/title.png" width="100%" alt="" />
        <img class="index-runman" src="img/index_runman.png" width="100%" alt="" />
        <div class="index-bottom-box">
            <img class="index-info" src="img/index_info_img.png" width="100%" alt="" />
            <!--开始游戏按钮-->
            <div class="index-set-out animated pulse slow infinite" id="gotoGame"></div>
            <!--游戏结束后，中奖用户查看中奖状态、领奖按钮-->
            <!-- <div class="index-set-prize animated pulse slow infinite" id="gotoPrize"></div> -->
            <div class="index-btn-box flex">
                <div class="share"></div>
                <div class="gift"></div>
            </div>
        </div>
    </div>

    <div class="page game" id="game">
        <div class="game-life-box flex">
            <img src="img/game_life_item.png" alt="" />
            X<span>3</span>
        </div>
        <div class="game-score-box">0</div>
        <img class="game-title" src="img/title.png" alt="">
        <div class="game-left-btn" id="left"></div>
        <div class="game-right-btn" id="right"></div>
        <div class="game-box">
            <div class="person">
                <img class="protection" src="img/game_person_protection.png" alt="">
                <div id="person" class="person-hit-area"></div>
            </div>
            <div class="road-sign-box">
                <img class="road-sign-left" src="img/game_road_sign_img.png" alt="" />
                <img class="road-sign-left" src="img/game_road_sign_img.png" alt="" />
                <img class="road-sign-left" src="img/game_road_sign_img.png" alt="" />
                <img class="road-sign-left" src="img/game_road_sign_img.png" alt="" />
                <img class="road-sign-left" src="img/game_road_sign_img.png" alt="" />
            </div>
            <div class="road-sign-box">
                <img class="road-sign-right" src="img/game_road_sign_img.png" alt="" />
                <img class="road-sign-right" src="img/game_road_sign_img.png" alt="" />
                <img class="road-sign-right" src="img/game_road_sign_img.png" alt="" />
                <img class="road-sign-right" src="img/game_road_sign_img.png" alt="" />
                <img class="road-sign-right" src="img/game_road_sign_img.png" alt="" />
            </div>
            <img class="game-message animated fadeOutUp" id="plus10" src="img/game_plus10.png" alt="" />
            <img class="game-message animated fadeOutUp" id="plus30" src="img/game_plus30.png" alt="" />
        </div>
    </div>

    <div class="page rank">
        <div class="rank-cont">
            <div class="rank-box">
                <div class="rank-list-box">
                    <div class="rank-list">
                        <img src="img/rank_first_img.png" alt="" />
                        <div class="rank-user-box"><img src="img/user_img.jpg" alt="" /></div>
                        <div class="rank-user-name">三角袋泡茶</div>
                        <div class="rank-user-score">得分：<span>1892</span></div>
                    </div>
                    <div class="rank-list">
                        <img src="img/rank_secend_img.png" alt="" />
                        <div class="rank-user-box"><img src="img/user_img.jpg" alt="" /></div>
                        <div class="rank-user-name">三角袋泡茶</div>
                        <div class="rank-user-score">得分：<span>1892</span></div>
                    </div>
                    <div class="rank-list">
                        <img src="img/rank_third_img.png" alt="" />
                        <div class="rank-user-box"><img src="img/user_img.jpg" alt="" /></div>
                        <div class="rank-user-name">三角袋泡茶</div>
                        <div class="rank-user-score">得分：<span>1892</span></div>
                    </div>
                    <div class="rank-list">
                        <div class="rank-user-number">4</div>
                        <div class="rank-user-box"><img src="img/user_img.jpg" alt="" /></div>
                        <div class="rank-user-name">三角袋泡茶</div>
                        <div class="rank-user-score">得分：<span>1892</span></div>
                    </div>
                    <div class="rank-list">
                        <div class="rank-user-number">5</div>
                        <div class="rank-user-box"><img src="img/user_img.jpg" alt="" /></div>
                        <div class="rank-user-name">三角袋泡茶</div>
                        <div class="rank-user-score">得分：<span>1892</span></div>
                    </div>
                    <div class="rank-list">
                        <div class="rank-user-number">6</div>
                        <div class="rank-user-box"><img src="img/user_img.jpg" alt="" /></div>
                        <div class="rank-user-name">三角袋泡茶</div>
                        <div class="rank-user-score">得分：<span>1892</span></div>
                    </div>
                </div>
                <div class="rank-list my">
                    <div class="rank-user-number">15</div>
                    <div class="rank-user-box"><img src="img/user_img.jpg" alt="" /></div>
                    <div class="rank-user-name">三角袋泡茶</div>
                    <div class="rank-user-score">得分：<span>1892</span></div>
                </div>
            </div>
            <img class="rank-close" src="img/close_btn.png" alt="" />
        </div>
    </div>

    <script language="javascript" type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script language="javascript" type="text/javascript" src="js/music.js"></script>
    <script language="javascript" type="text/javascript" src="js/NoSleep.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/vconsole.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            let startX = 0;
            let newX = 0;
            let roundPos = 0;
            let roundDeg = 0;
            let itemSpeed = 3000;
            let score = 0;
            let itemNewTime = 120;
            let fps = 60, now, then = Date.now(), interval = 1000 / fps, delta, frame;
            let forTime = 0;
            let itemTime = 120;
            let forTime1 = 0;
            let itemId = 0;
            let itemName = '';
            let itemArr = ['blue','black','banana','roadblock'];
            let confirmHigh = ['left','middle','right'];
            let isHit = true;
            let isDefense = false;
            let turnLeft,turnRight = false;
            let lifeNum = 3;
            //let personAnimate;
            //let personAnimateLock = true;

            var gameInit = function () {
                startX = 0;
                newX = 0;
                roundPos = 0;
                roundDeg = 0;
                itemSpeed = 3000;
                score = 0;
                itemNewTime = 120;
                forTime = 0;
                itemTime = 120;
                forTime1 = 0;
                itemId = 0;
                itemName = '';
                itemArr = ['blue','black','banana','roadblock'];
                confirmHigh = ['left','middle','right'];
                isHit = true;
                isDefense = false;
                turnLeft = false;
                turnRight = false;
                $('.person').removeAttr('style');
                //personAnimateBegin();
                $('.person').css({'background-image':'url("./img/runing_man.gif")', 'background-size':'auto 100%'});
            };

            var touchFun = function (event) {
                let e = event || window.event;
                e.preventDefault();

                switch(e.type){
                    case "touchstart":
                        console.log(e.target.id);
                        if (e.target.id == 'left'){
                            turnLeft = true;
                        }else if (e.target.id == 'right'){
                            turnRight = true;
                        }
                        break;
                    case "touchend":
                        turnLeft = false;
                        turnRight = false;
                        break;
                }
            };

            var tick = function() {
                window.cancelAnimationFrame(frame);
                frame = window.requestAnimationFrame(tick);
                now = Date.now();
                delta = now - then;
                if (delta > interval) {
                    then = now - (delta % interval);
                    gameRound();
                }
            };

            var hitTestObject = function (item,hitObj){
                if(item == null || hitObj == null) return;
                var itemTop = item.offset().top,
                    itemFoot = item.offset().top + parseInt(item.height()),
                    itemLeft = item.offset().left,
                    itemRight = item.offset().left + parseInt(item.width());
                var hitTop = hitObj.offset().top,
                    hitFoot = hitObj.offset().top + parseInt(hitObj.height()),
                    hitLeft = hitObj.offset().left,
                    hitRight = hitObj.offset().left + parseInt(hitObj.width());
                if(itemFoot > hitTop+40 && itemRight > hitLeft && itemTop < hitFoot && itemLeft < hitRight){
                    return true;
                }
            };

            var itemMove = function (item,scene) {
                var person = $('#person');
                switch(scene){
                    case 'left':
                        item.animate({
                            left: '-20%',
                            top: '100%',
                            width: '3rem'
                        },{
                            duration: itemSpeed,
                            easing: 'swing',
                            step: function (now,fx) {
                                if (hitTestObject($(this), person)) {
                                    hitObjectFun($(this));
                                }
                            },
                            complete: function () {
                                $(this).remove();
                            }
                        });
                        break;
                    case 'middle':
                        item.animate({
                            left: '30%',
                            top: '100%',
                            width: '3rem'
                        },{
                            duration: itemSpeed,
                            easing: 'swing',
                            step: function (now,fx) {
                                if (hitTestObject($(this), person)) {
                                    hitObjectFun($(this));
                                }
                            },
                            complete: function () {
                                $(this).remove();
                            }
                        });
                        break;
                    case 'right':
                        item.animate({
                            left: '80%',
                            top: '100%',
                            width: '3rem'
                        },{
                            duration: itemSpeed,
                            easing: 'swing',
                            step: function (now,fx) {
                                if (hitTestObject($(this), person)) {
                                    hitObjectFun($(this));
                                }
                            },
                            complete: function () {
                                $(this).remove();
                            }
                        });
                        break;
                }
            };

            var gameLevelUp = function () {
                itemSpeed -= 200;
                itemTime -= 10;
                itemArr.push('banana','roadblock');
            };

            var gameRound = function(){
                forTime++;
                forTime1++;
                score += 0.01;
                $('.game-score-box').html(Math.floor(score));
                if (forTime%3600 == 0) {
                    gameLevelUp();
                }
                if (forTime1%itemNewTime == 0) {
                    forTime1 = 0;
                    itemNewTime = Math.floor(Math.random()*itemTime)+60;
                    let randomScene = confirmHigh[Math.floor(Math.random()*confirmHigh.length)];
                    itemId ++;
                    itemName = itemArr[Math.floor(Math.random()*itemArr.length)];
                    $('.game-box').append('<img id="'+ itemId +'" class="game-item '+ randomScene +' '+ itemName +'" src="img/game_item_'+ itemName +'.png" alt="" />');
                    itemMove($('#'+itemId),randomScene);
                }
                if (turnRight){
                    if (roundPos >= 115) return;
                    roundPos += 2; //right
                }
                if (turnLeft) {
                    if (roundPos <= -110) return;
                    roundPos -= 2; //left
                }
                roundDeg = -roundPos/10;
                $('.person').css('transform','translate('+roundPos+'%) rotate('+roundDeg+'deg)');
            };

            /*var personAnimateBegin = function(){
            	if(!personAnimateLock){
            		return;
            	}
            	personAnimateLock = false;
            	console.log('人物动画 - Begin');

            	let listNum = 0;
            	let bgList = ['left top', 'right top'];
            	function personBgSwitch(){
            		$('.person').css({'background-image':'url("./img/runing_man.png")', 'background-size':'auto 100%', 'background-position':bgList[listNum]});
            		listNum++;
            		if(listNum >= bgList.length) listNum=0;
            	}
            	personBgSwitch();
            	personAnimate = setInterval(personBgSwitch, 500);
            }*/

            var hitObjectFun = function (item) {
                isHit = false;
                setTimeout(function () {isHit = true;},500);
                item.remove();
                if (item.hasClass('blue')) {
                    isDefense = true;
                    $('.protection').show();
                    $('.game-message').hide();
                    setTimeout(function () {$('#plus10').show();},200);
                    score += 10;
                }
                if (item.hasClass('black')) {
                    $('.game-message').hide();
                    setTimeout(function () {$('#plus30').show();},200);
                    score += 30;
                }
                if (item.hasClass('banana') || item.hasClass('roadblock')) {
                    console.log(isDefense);
                    if (isDefense){
                        $('.protection').hide();
                        isDefense = false;
                        return;
                    }
                    $('.person').css({'background-image':'url("./img/runing_man_over.png")', 'background-size':'auto 100%'});
                    setTimeout(function(){
                    	gameOver();
                    }, 500);
                }
                $('.game-score-box').html(Math.floor(score));
            };

            var gameOver = function () {
                $('.game-item').remove();
                window.cancelAnimationFrame(frame);
                document.body.removeEventListener('touchstart',touchFun, {passive: false});
                document.body.removeEventListener('touchend',touchFun, {passive: false});
                document.body.removeEventListener('touchmove',touchFun, {passive: false});
                lifeNum --;
                $('.game-life-box').find('span').html(lifeNum);

                if (score >= 100){
                    $('#popGame').show();
                    $('#success').show();
                    $('.score-box').find('span').html(Math.floor(score));
                    $('#scoreShow').html(Math.floor(score));
                    if (lifeNum == 0) {
                        $('#success').find('.pop-content').find('p').remove();
                        $('#success').find('.pop-content').append('<p>你今天的次数已经用完啦，邀请好友可以再玩一次哦~</p>');
                        $('.play-again').hide();
                    }
                } else {
                    $('#popGame').show();
                    $('#failed').show();
                    $('.score-box').find('span').html(Math.floor(score));
                    if (lifeNum == 0) {
                        $('#failed').find('.pop-content').find('p').remove();
                        $('#failed').find('.pop-content').append('<p>你今天的次数已经用完啦，邀请好友可以再玩一次哦~</p>');
                        $('.play-again').hide();
                    }
                }
            };
            
            var gameStart = function(){
                gameInit();
                tick();
                document.body.addEventListener('touchstart',touchFun, {passive: false});
                document.body.addEventListener('touchend',touchFun, {passive: false});
                document.body.addEventListener('touchmove',touchFun, {passive: false});
            };

            //buttons bind events
            $('.pop-close').bind('touchstart',function () {
                $('#pop').hide();
                $('#pop').find('.pop-box').hide();
                $('#prize').hide();
                $('#prize').find('.pop-box').hide();
            });

            $('#share').bind('touchstart',function () {
                $('#pop').hide();
                $('#share').hide();
            });

            $('.gift').bind('touchstart',function () {
                $('#pop').show();
                $('#rule').show();
            });

            $('.share').bind('touchstart',function () {
                $('#pop').show();
                $('#share').show();
            });

            $('.rank-btn').bind('touchstart',function () {
                $('.rank').show();
            });

            $('.rank-close').bind('touchstart',function () {
                $('.rank').hide();
            });

            $('#gotoGame').bind('touchstart',function () {
                $('#game').show();
                $('#popGame').show();
                $('#gameInfo').show();
            });

            $('#back').bind('touchstart',function () {
                $('.game').hide();
                $('#popGame').hide();
                $('#gameInfo').hide();
            });

            $('#start').bind('touchstart',function () {
                $('#popGame').hide();
                $('#gameInfo').hide();
                gameStart();
            });

            $('.play-again').bind('touchstart',function () {
                $('#popGame').hide();
                $('.pop-box').hide();
                gameStart();
            });

            $('#gotoPrize').bind('touchstart',function () {
                $('#prize').show();
                $('#prizeInfo').show();
            });

            $('#write-address').bind('touchstart',function () {
                $('#address').show();
                $('#prizeInfo').hide();
            });
        });
    </script>
</body>
</html>